<!DOCTYPE html>
<html>
  <head>
    <title>drawgraph</title>
    <link rel="stylesheet" href="../../assets/css/photon.min.css" />
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <aside id="sidebar">
      <table>
        <thead>
          <tr>
            <th>draw</th>
            <th>offset</th>
            <th>datatype</th>
            <th>BE</th>
            <th>color</th>
            <th>min</th>
            <th>max</th>
            <th>value</th>
          </tr>
        </thead>
        <tbody id="tbody">
          <tr>
            <td><input type="checkbox" /></td>
            <td><input class="offset" type="number" /></td>
            <td>
              <select>
                <option>uint8</option>
                <option>int8</option>
                <option>uint16</option>
                <option>int16</option>
                <option>uint32</option>
                <option>int32</option>
                <option>float</option>
                <option>double</option>
              </select>
            </td>
            <td><input class="control" type="checkbox" /></td>
            <td>
              <div class="color" style="display: relative;">
                <div style="display: relative; background-color: red; width: 100%; height: 1rem;"></div>
                <div id="color-palette" tabindex="-1">
                  <div style="background-color: red;"></div>
                  <div style="background-color: blue;"></div>
                  <div style="background-color: green;"></div>
                  <div style="background-color: yellow;"></div>
                  <div style="background-color: orange"></div>
                  <div style="background-color: dodgerblue"></div>
                  <div style="background-color: purple"></div>
                  <div style="background-color: fuchsia"></div>
                  <div style="background-color: lime"></div>
                  <div style="background-color: olive"></div>
                  <div style="background-color: navy"></div>
                  <div style="background-color: teal"></div>
                  <div style="background-color: cyan"></div>
                  <div style="background-color: brown"></div>
                  <div style="background-color: cadetblue"></div>
                  <div style="background-color: coral"></div>
                </div>
              </div>
            </td>
            <td><input type="number" /></td>
            <td><input type="number" /></td>
            <td><input type="number" disabled /></td>
          </tr>

          <tr>
            <td><input type="checkbox" /></td>
            <td><input class="offset" type="number" /></td>
            <td>
              <select>
                <option>uint8</option>
                <option>int8</option>
                <option>uint16</option>
                <option>int16</option>
                <option>uint32</option>
                <option>int32</option>
                <option>float</option>
                <option>double</option>
              </select>
            </td>
            <td><input type="checkbox" /></td>
            <td>
              <div class="color" style="display: relative;">
                <div style="display: relative; background-color: green; width: 100%; height: 1rem;"></div>
              </div>
            </td>
            <td><input type="number" /></td>
            <td><input type="number" /></td>
            <td><input type="number" disabled /></td>
          </tr>
          <tr id="add-new-line">
            <td><span class="icon icon-plus-squared"></span></td>
          </tr>
        </tbody>
      </table>
      
    </aside>
    <div class="viewer">
      <canvas id="canvas"></canvas>
    </div>
    <footer class="toolbar toolbar-footer"><div id="canvas-info"></div></footer>
    <script src="index.js"></script>
  </body>
</html>